@import "../css/variables.less";

.settings {
  padding: 0 10px;
  overflow-y: auto;
  background-color: @background-color;
  height: 100%;
  width: 200px;
  transition: width 0.3s ease 0s;
  flex-shrink: 0;
  border-left: 1px solid @border-color;
  .settings-header, .settings-body {
    width: 250px;
  }
  .settings-header {
    .nav-tabs {
      .nav-item {
        cursor: pointer;
      }
    }
  }
  .settings-body {
    padding: 16px;
    height: calc(100% - 40px);
    overflow-y: auto;
  }
  .novel-reader-ant-typography {
    margin: 8px 0;
  }
  .novel-reader-ant-tabs-nav-list {
    width: 100%;
  }
  .novel-reader-ant-tabs-tab {
    margin: 0 !important;
    width: 50%;
    display: flex;
    justify-content: center;
  }
}
@media screen and (max-width: 768px) {
  .settings.show {
    width: 100% !important;
    padding: 0 !important;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .settings .novel-reader-ant-tabs-tabpane {
    padding: 10px;
  }
}
